<template>
    <div>
        <div>
            <div class="info-header" :style="{height: imgHeight}">
                <mt-swipe :auto="5000">
                    <mt-swipe-item v-for="item in highlightList" :key="item.infoid">
                        <div class="img">
                            <img :src="item.coverurl" @click="showInfoDetail(item)"/>
                        </div>
                        <div class="text text-left px-2">{{item.title}}</div>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
            <div class="info-block-list text-left">
                <div>
                    <div class="info-block py-4" v-if="!!data.news">
                        <div class="info-block-type color-default">
                            <div class="x-row">
                                <div class="x-col-6">政策要闻</div>
                                <div class="x-col-6 text-right info-more"><span @click="showMore('NEWS')">更多</span></div>
                            </div>
                        </div>
                        <div class="info-list">
                            <div class="info-item" v-for="item in data.news.items" :key="item.infoid">
                                <div v-clampy="1" class="clamp-text" @click="showInfoDetail(item)" v-if="!!item.title">{{item.title}}</div>
                                <!-- <span class="time color-gray ml-2">{{item.createtime}}</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="info-block py-4" v-if="!!data.publicity">
                        <div class="info-block-type color-default">
                            <div class="x-row">
                                <div class="x-col-6">信息公开</div>
                                <div class="x-col-6 text-right info-more"><span @click="showMore('PUBLICITY')">更多</span></div>
                            </div>
                        </div>
                        <div class="info-list">
                            <div class="info-item" v-for="item in data.publicity.items" :key="item.infoid">
                                <div v-clampy="1" class="clamp-text" @click="showInfoDetail(item)" v-if="!!item.title">{{item.title}}</div>
                                <!-- <span class="time color-gray ml-2">{{item.createtime}}</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="info-block py-4" v-if="!!data.extraReading">
                        <div class="info-block-type color-default">
                            <div class="x-row">
                                <div class="x-col-6">扩展阅读</div>
                                <div class="x-col-6 text-right info-more"><span @click="showMore('EXTRAREADING')">更多</span></div>
                            </div>
                        </div>
                        <div class="info-list">
                            <div class="info-item" v-for="item in data.extraReading.items" :key="item.infoid">
                                <div v-clampy="1" class="clamp-text" @click="showInfoDetail(item)" v-if="!!item.title">{{item.title}}</div>
                                <!-- <span class="time color-gray ml-2">{{item.createtime}}</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="info-block py-4" v-if="!!data.course">
                        <div class="info-block-type color-default">
                            <div class="x-row">
                                <div class="x-col-6">开班信息</div>
                                <div class="x-col-6 text-right info-more"><span @click="showMore('')">更多</span></div>
                            </div>
                        </div>
                        <div class="info-list">
                            <div class="info-item" v-for="item in data.course.items" :key="item.infoid" v-if="item.infoid != null">
                                <div v-clampy="1" class="clamp-text" v-if="!!item.schoolname">{{item.schoolname}}-{{item.coursename}}</div>
                                <!-- <span class="time color-gray ml-2">{{item.begintime}}</span> -->
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <footer-nav></footer-nav>
    </div>
</template>

<script>
import footerNav from '@/components/footer/footer'
import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import infoApi from '@/api/info'

export default {
    data() {
        return {
            loading: false,
            hasMore: true,
            info: {
                cover: '',
                headerNews: '其实也没什么'
            },

            typeMap: {
                NEWS: 'news',
                PUBLICITY: 'publicity',
                EXTRAREADING: 'extrareading'
            },

            data: {
                news: {
                    items: []    
                },
                publicity: {
                    items: []
                },
                course: {
                    items: []
                }
            },

            highlightList: []
        }
    },

    components: {
        footerNav
    },


    created() {
        this.getHighlighList();
        this.list('NEWS');
        this.list('PUBLICITY');
        // this.list('EXTRAREADING');
        this.listCourse();
    },

    computed: {
        imgHeight () {
            return (window.innerWidth - 32) * 0.71 + 'px'
        },
        bannerHeight () {
            return (window.innerWidth - 32) * 0.71 + 40 - 0 + 'px'
        }
    },

    methods: {
        
        list(infoType) {
            infoApi.getInfoList({
                params: {
                    infotype: infoType,
                    pageno: 0,
                    pagesize: 5
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT];
                this.data[this.typeMap[infoType]] && (this.data[this.typeMap[infoType]].items = result || []);
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE] || '获取失败');
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        listCourse() {
            infoApi.getCourseInfoList({
                params: {
                    pageno: 0,
                    pagesize: 5
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT];
                this.data.course && (this.data.course.items = result || []);
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE] || '获取失败');
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },
        
        showInfoDetail(item) {
            this.$router.push({path: '/information/detail', query: {id: item.infoid || ''}});
        },

        getHighlighList() {
            infoApi.getInfoList({
                params: {
                    highlit: 'TRUE',
                    pageno: 0,
                    pagesize: 5
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT];
                this.highlightList = result || [];
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE] || '获取失败');
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        showMore(infoType) {
            this.$router.push({
                path: '/information/more',
                query: {
                    type: this.typeMap[infoType]
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>

$offset-x: 16px;
$scale: 1.2;
.info-header {
    margin-top: 16px;
    margin-left: $offset-x;
    margin-right: $offset-x;
    border-radius: 8px 8px;
    position: relative;
    font-size: 14px * $scale;
    overflow-y: hidden;
    .text {
        position: absolute;
        bottom: 10px;
        min-height: 25px;
        width: 100%;
        color: #ffffff;
        border-radius: 0 0 8px 8px;
    }

    .img {
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
        
    }
}

.info-block-list {
    padding-bottom: 70px;
    margin-left: $offset-x;
    margin-right: $offset-x;
    .info-block {
        border-bottom: 1px solid #d2d2d2;
        
        .info-block-type {
            font-size: 18px * $scale;
            height: 18px * $scale;
            margin-bottom: 16px;

            .info-more {
                padding: 2px 0;
                font-size: 16px;
            }

        }

        .info-list {
            margin-top: 16px;
            
            .info-item {
                font-size: 14px * $scale;
                line-height: 19px;
                margin-top: 12px;
            
                .time {
                    font-size: 11px * $scale;
                }

                // .clamp-text {
                //     overflow: hidden;
                //     -webkit-line-clamp: 1;
                //     text-overflow: ellipsis;
                //     display: -webkit-box;
                // }
            }
        }
    }

    .info-block:last-child {
        border-bottom: none;
    }
}
</style>
